<template>
	<view>
		<!-- 头部 -->
		 <uni-nav-bar background-color="#3286ed" :statusBar="true" :fixed="true" color="#fff" title="回货入库" left-icon="left" right-text="新增" @clickLeft="backFn"     @clickRight="addFn"></uni-nav-bar>
		 
		 <!-- 筛选 -->
		 <view >
			   <uni-row class="demo-uni-row">
				<uni-col :span="10">
					<zb-dropdown-menu  style="width: 100%" z-index="12">
					  <zb-dropdown-item     :options="option"  v-model="form.orderStatus" @change="changeFn"   ></zb-dropdown-item>
					</zb-dropdown-menu>
				</uni-col>
				<uni-col :span="2">
					<view class="text" style="color:#c3c3c3">|</view>
				</uni-col>
				<uni-col :span="5">
					<view class="text" @click="isShow=true">筛选</view>
				</uni-col>
				<uni-col :span="2">
					<view class="text" style="color:#c3c3c3">|</view>
				</uni-col>
				<uni-col :span="5">
					<view class="text"><uni-icons type="search" color="#c3c3c3" size="24"></uni-icons></view>
				</uni-col>
			   </uni-row>
		 </view>
		 <view style="width:100%;height: 88rpx;display: block"></view>
		 
		 <!-- 列表 -->
		 <u-swipe-action  :autoClose='true' >
			 <view  v-for="item in list" :key="item.id">
				 <u-swipe-action-item :disabled="disabledShow"  :options="options1" @click="delBtn" :name="item.id">
			     <view  class="application" @click="toawarehouseinfo(item.id)">
			 				 <view class="application_one">{{item.returnReceiptNo}}</view>
			 				 <view class="desc" >发起人：{{item.sponsorName}}</view>
			 				 <view class="desc" >回货申请单：{{item.returnApplyNo}}</view>
			 				 <view class="desc" >入库日期：{{item.warehousingTime}}</view>
			 				 <view class="desc" >入库仓库：{{item.applyWarehouseName}}</view>
			 	  </view>
				  </u-swipe-action-item>
			 </view>
		 </u-swipe-action>
		 <view v-if="list.length ==0 " class="BGC"></view>
		 
		<!-- 右侧弹出框 -->
		<u-popup :closeable="true"  :show="isShow" customStyle="margin-top:44px" overlayStyle="margin-top:44px"  mode="right"  :closeOnClickOverlay="true"  @close="closeBtn">
				<view class="rightBox" >
					<u-cell  >
						<template #title>
							<view style="font-size: 16px;font-weight: 600;color:#ff7c35;">筛选</view>
						</template>
						<template #icon>
							<view style="font-weight: 900;color:#ff7c35;">|</view>
						</template>
					</u-cell>
					<!-- <view class="itemBox">
						<view class="title">客户名称:</view>
						<view>  <u--input v-model="form.customerName" placeholder="请输入客户名称"  ></u--input></view>
					</view> -->
					<view class="itemBox">
						<view class="title">回货申请单编号:</view>
						<view>  <u--input  v-model="form.returnApplyNo" placeholder="请输入回货申请单编号"  ></u--input></view>
					</view>
					<u-cell title="客户名称">
						<template #value>
							<navigator url="/pages/dialog/customer" open-type="navigate">
								<view v-if="form.customerName">{{form.customerName}}</view>
								<view v-else style="font-size: 14px;">请选择</view>
							</navigator>
						</template>
					</u-cell>
						
				</view>
				
				<view >
					  <uni-row >
						<uni-col :span="12">
						<u-button @click="reset" color="#c3c3c3"size="small" text="重置" ></u-button>
						</uni-col>
						<uni-col :span="12">
							<u-button type="warning"  @click="searchClick" size="small" text="确认"></u-button>
						</uni-col>
					  </uni-row>
				</view>
			</u-popup>
			<!-- 消息提示 -->
			<u-toast ref="uToast"></u-toast>
			
	</view>
</template>

<script>
	import {getBackwarehouseorderList,delBackwarehouseApi} from '@/api/backwarehouse.js'
	import {getDicts} from '@/api/dictionary/index.js'
	export default {
		data() {
			return {
				disabledShow:true,//右滑删除得
				permissions:[],//按钮权限
				list:[],
				form:{
					pageSize:10,
					pageNum:1,
					returnReceiptNo:"",//	是	租赁销售回货入库单号
					warehousingTime:"",//	是	Date	入库时间
					sponsor:"",//	是	Long	发起人
					sponsorName:"",//	是	string	发起人名称
					customerId:"",//	是	Long	客户
					customerName:"",//	是	string	客户名称
					returnApplyId:"",//	是	Long	回货申请单id
					returnApplyNo:"",//	是	string	回货单编号
					salesman:"",//	是	String	业务员
					salesmanName:"",//	是	String	业务员名称
					applyWarehouseId:"",//	是	Long	申请入库仓库
					applyWarehouseName:"",//	是	String	申请入库仓库名称
					warehousingWarehouseId:"",//	是	String	入库仓库
					totalPrice:"",//	是	String	总价
					mechineList:[],//	是	List	回库机器列表
					warehousingWarehouseName:"",
					orderStatus:'',//订单状态
				  },
				  total:0,
				  isShow:false,//右侧框控件
				  option:[
					  {text:'全部',value:''},
				  ],
				  options1:[{
				  	 text: '删除'
				  }],
				}
			 
		},
		onLoad() {
			this.permissions=this.$store.getters.permissions
			this.initData()
			this.getWarehouseType()
			// 控制删除按钮权限出现
			if(this.permissions.includes('*:*:*') ||this.permissions.includes('module:returnReceiptOrder:remove')){
			     this.disabledShow=false
			}
		},
		onBackPress(){
			this.getValue()
			this.initData()
		},
		
		// 上划
		onReachBottom() {
			 if(this.form.pageSize*this.form.pageNum<this.total){
				 this.form.pageNum++
				 let res=getBackwarehouseorderList(this.form).then(reponse=>{
				 			 this.list.push(...reponse.rows)
							  console.log(this.list);
				 })
				
				 
			 }else{
				 console.log('已经加载完毕');
			 }
		},
		// 下拉
		async onPullDownRefresh() {
			this.list=[]
			this.form={
				pageSize:10,
				pageNum:1,
				returnReceiptNo:"",//	是	租赁销售回货入库单号
				warehousingTime:"",//	是	Date	入库时间
				sponsor:"",//	是	Long	发起人
				sponsorName:"",//	是	string	发起人名称
				customerId:"",//	是	Long	客户
				customerName:"",//	是	string	客户名称
				returnApplyId:"",//	是	Long	回货申请单id
				returnApplyNo:"",//	是	string	回货单编号
				salesman:"",//	是	String	业务员
				salesmanName:"",//	是	String	业务员名称
				applyWarehouseId:"",//	是	Long	申请入库仓库
				applyWarehouseName:"",//	是	String	申请入库仓库名称
				warehousingWarehouseId:"",//	是	String	入库仓库
				totalPrice:"",//	是	String	总价
				mechineList:[],//	是	List	回库机器列表
				warehousingWarehouseName:"",
				orderStatus:'',//订单状态
			  },
			this.initData()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},3000)
		},
		methods:{
			// 选择客户返回的数据
			getValue(list){
				console.log(list,'B页面传递的数据')
				this.form.customerName=list.name
				this.form.customerId=list.id
			},
			async initData(){
				let res=await getBackwarehouseorderList(this.form)
				console.log(res);
				this.list=res.rows
				this.total=res.total
			},
			// 获取回货入库订单状态
			async getWarehouseType(){
			const {data}=	await getDicts('return_status')
			// console.log(data);
			let newArr=data.map((item,index)=>{
				return {text:item.dictLabel,value:item.dictValue}
			})
			this.option=this.option.concat(newArr)
			},
			// 返回上一级
			backFn(){
				 uni.navigateBack({delta:1})
			},
			// 详情
			toawarehouseinfo(id){
				uni.navigateTo({
					url:'/pages/backwarehouse/backwarehouseinfo/backwarehouseinfo?id='+id
				})
			},
			// 新增
			addFn(){
				if(this.permissions.includes('*:*:*')  || this.permissions.includes('module:returnReceiptOrder:add')){
					uni.redirectTo({
						url:'/pages/backwarehouse/addbackwarehouse/addbackwarehouse'
					})
				}else{
					this.$refs.uToast.show({
					   type:'default',
					   message:'您没有权限新增回货入库单！'
					})
				}
				
			},
			// 删除
			async delBtn(e){
				console.log(e);
				await delBackwarehouseApi(e.name)
				this.$refs.uToast.show({
					message:'删除成功！',
				})
				this.initData()
				
			},
			// 订单的筛选 通过入库未入库
			changeFn(e){
				console.log(e);
				this.form.orderStatus=e.value
				this.initData()
			},
			// 右边弹框筛选
			searchClick(){
				this.initData()
				this.isShow=false
			},
			// 筛选重置
			reset(){
				this.form.returnApplyNo=''
				this.form.customerName=''
			},
			// 关闭弹框
			closeBtn(){
				this.form.returnApplyNo=''
				this.form.customerName=''
				this.isShow=false
			}
		},
	}
</script>

<style lang="scss" scoped>
	.BGC{
		width: 100%;
		min-height: 400px;
		background-image: url('@/static/images/bgc.png');
		background-size:100% 200px;
		background-repeat: no-repeat;
			margin: 200px 0;
	}
	
	.demo-uni-row{
		background-color: #fff;
		// margin-bottom: 10px;
		width: 100%;
		position: fixed;
		z-index: 10;
			/* QQ、字节小程序文档写有 :host，但实测不生效 */
			/* 百度小程序没有 :host，需要设置block */
			/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
			display: block;
			/* #endif */
			.text{
				padding-top: 15px;
				font-size: 16px;
				text-align: center;
			}
	}
 .application{
		  min-height: 120px;
		  position: relative;
		  background-color: #fff;
		  border-bottom: 1px solid #ccc;
		  padding-top: 8px;
		  padding-left: 12px;
		  padding-bottom: 8px;
		  margin-top: 10px;
		  .application_one{
			  font-size: 16px;
			  font-weight: 600;
			  margin-bottom: 3px;
		  }
		  .desc{
			  font-size: 12px;
			  color:#8c8b8a;
			  margin-bottom: 3px;
		  }
		  
		 .addapplicaionChild{
		  	width: 70px;
		  	height: 25px;
		  	line-height: 25px;
		  	font-size: 12px;
		  	text-align: center;
		  	color: #ff7c0a;
		  	background-color: #fff;
		  	position: absolute;
		  	top: 20px;
		  	right: 10px;
		  	 
		    }
			 
	  }
	  // 右边弹框
	  .rightBox{
	  	min-width:300px;
	  	height:100%;
	  	.itemBox{
	  		height: 85px;
	  		padding: 10px;
	  		border-bottom: solid 1px #c3c3c3;
	  		.title{
	  			padding: 5px 0;
	  		}
	  	}
	  }
	 
</style>
